import styles from './data_collect.less';

import img_report_icon from './icon/report_icon.png';
import img_triangle_down from './icon/triangle_down.png';
import img_unconnected from './icon/unconnected.png';
import img_checkbox_selected from './icon/checkbox_selected.png';
import img_checkbox_unselected from './icon/checkbox_unselected.png';

import { useState } from 'react';
import { useModel } from "umi";
const { ipcRenderer } = window.require("electron");
import { generate_date_str } from './script/utils.js';
import {
    device_manager_init,
    get_app_list,
    start_app,
    start_collect,
    stop_collect } from './script/device_manager.js'

let send_msg_hook;
let set_app_list_status_hook;

let current_app_path = '';
let current_app_icon = '';
let current_app_name = '请选择测试游戏';
let current_app_package = '';

function DivInfoBar() {
    let game_icon_dom = <img className={styles.game_icon} onClick={() => set_app_list_status_hook(true)}></img>;

    if (current_app_icon.length > 0) {
        game_icon_dom = <img className={styles.game_icon_transparent} src={current_app_icon}
            onClick={() => set_app_list_status_hook(true)}></img>;
    }

    return (
        <div className={styles.info_bar}>
            <div className={styles.info_bar_game}>
                {game_icon_dom}
                <span className={styles.game_name}
                    onClick={() => set_app_list_status_hook(true)}>{current_app_name}</span>
                <img className={styles.game_select_icon} src={img_triangle_down}
                    onClick={() => set_app_list_status_hook(true)}></img>
            </div>

            <div className={styles.info_bar_report}>
                <img className={styles.report_icon} src={img_report_icon}
                    onClick={() => send_msg_hook('show_report')}></img>
                <span className={styles.report_name} onClick={() => send_msg_hook('show_report')}>测试报告</span>
            </div>
        </div>
    );
}

export const collect_data_list = [
    {name:'system',         bit:0,  main_data:true,     text:'系统数据'},
    {name:'system_fps',     bit:0,  main_data:false,    text:'FPS数据'},
    {name:'system_cpu',     bit:1,  main_data:false,    text:'CPU数据'},
    {name:'system_gpu',     bit:2,  main_data:false,    text:'GPU数据'},
    {name:'system_memory',  bit:3,  main_data:false,    text:'内存数据'},
    {name:'system_temp',    bit:4,  main_data:false,    text:'温度数据'},
    {name:'system_power',   bit:5,  main_data:false,    text:'功耗数据'},
    {name:'system_net',     bit:6,  main_data:false,    text:'网络数据'},
    {name:'chip',           bit:7,  main_data:true,     text:'芯片数据'},
    {name:'engine',         bit:8,  main_data:true,     text:'引擎数据'}
];

let data_item_mask = 0;
function collect_data_item_click(data_index, current_checkbox_mask, set_checkbox_mask) {
    if (data_index === 0) { // click system
        if ((current_checkbox_mask & 1) === 0) {
            data_item_mask |= 0x7f;
            set_checkbox_mask(current_checkbox_mask | 0xff);
        } else {
            data_item_mask &= ~0x7f;
            set_checkbox_mask(current_checkbox_mask &= ~0xff);
        }
    } else {
        if ((current_checkbox_mask & (1 << data_index)) === 0) {
            data_item_mask |= (1 << collect_data_list[data_index].bit);
            set_checkbox_mask(current_checkbox_mask | (1 << data_index));
        } else {
            data_item_mask &= ~(1 << collect_data_list[data_index].bit);
            set_checkbox_mask(current_checkbox_mask &= ~(1 << data_index));
        }
    }
}

function DivDataList() {
    const [checkbox_mask, set_checkbox_mask] = useState(0);
    let list = [];

    for (let i = 0; i < collect_data_list.length; i++) {
        let item;

        if (collect_data_list[i].main_data) {
            item = (
                <div className={styles.data_item} key={i}>
                    <div className={styles.data_item_click}
                        onClick={() => collect_data_item_click(i, checkbox_mask, set_checkbox_mask)}>
                        <img src={((checkbox_mask & (1 << i)) === 0) ? img_checkbox_unselected : img_checkbox_selected}
                            className={styles.checkbox_item}></img>
                        <span className={styles.data_name}>{collect_data_list[i].text}</span>
                    </div>
                </div>
            );
        } else {
            item = (
                <div className={styles.data_item_sub} key={i}>
                    <div className={styles.data_item_sub_click}
                        onClick={() => collect_data_item_click(i, checkbox_mask, set_checkbox_mask)}>
                        <img src={((checkbox_mask & (1 << i)) === 0) ? img_checkbox_unselected : img_checkbox_selected}
                            className={styles.checkbox_item_sub}></img>
                        <span className={styles.data_name_sub}>{collect_data_list[i].text}</span>
                    </div>
                </div>
            );
        }
        list.push(item);
    }

    return (
        <div className={styles.test_control_selection}>{list}</div>
    );
}

function generate_default_report_name() {
    return current_app_name + generate_date_str(new Date(), 'file');
}

function control_button_click_process(control_status, set_control_status) {
    if (control_status === '启动游戏') {
        if (start_app(current_app_package) === 0) {
            set_control_status('开始采集');
        }
        return;
    }

    if (control_status === '开始采集') {
        if (start_collect(current_app_package, data_item_mask) === 0) {
            set_control_status('停止采集');
        }
        return;
    }

    if (control_status === '停止采集') {
        if (stop_collect(generate_default_report_name()) === 0) {
            set_control_status('开始采集');
        }
    }
}

function DivCollectControl() {
    const { deviceInfo, linkType } = useModel("device");
    const [control_status, set_control_status] = useState('启动游戏');

    let display_dom = (
        <div className={styles.unconnected_tips}>
            <img src={img_unconnected} className={styles.unconnected_img}></img>
            <p className={styles.unconnected_info}>请用数据线将设备和电脑链接起来</p>
        </div>
    );

    if (deviceInfo !== null) {
        display_dom = (
            <div className={styles.test_control}>
                <p className={styles.test_control_title}>请选择采集的数据项</p>
                <DivDataList></DivDataList>
                <p className={styles.control_button}
                    onClick={() => control_button_click_process(control_status, set_control_status)}>
                    {control_status}
                </p>
            </div>
        );
        device_manager_init(current_app_path, linkType, deviceInfo.SN);
    }

    return <div className={styles.collect_control}>{display_dom}</div>;
}

function app_list_click_process(app) {
    current_app_icon = 'data:image/png;base64,' + app.icon;
    current_app_name = app.name;
    current_app_package = app.package;
    set_app_list_status_hook(false);
}

function DivAppList() {
    let list = get_app_list();

    let dom_list = [];
    for (let app of list) {
        let dom = (
            <div className={styles.app_entry} onClick={() => app_list_click_process(app)}>
                <img className={styles.app_entry_icon} src={'data:image/png;base64,' + app.icon}></img>
                <p className={styles.app_entry_name}>{app.name}</p>
            </div>
        );
        dom_list.push(dom);
    }

    return <div className={styles.select_app}>{dom_list}</div>;
}

function PageDataCollect({send_message}) {
    current_app_path = ipcRenderer.sendSync("getAppCwd");
    const [app_list_status, set_app_list_status] = useState(false);

    send_msg_hook = send_message;
    set_app_list_status_hook = set_app_list_status;
    let app_list_dom = <div></div>;
    if (app_list_status === true) {
        app_list_dom = <DivAppList></DivAppList>;
    }

    return (
        <div className={styles.base}>
            <DivInfoBar></DivInfoBar>
            <DivCollectControl></DivCollectControl>
            {app_list_dom}
        </div>
    );
};

export default PageDataCollect;